<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>模板流程设置</title>
    <link rel="stylesheet" href="../lib/layui-treegird/css/layui.css">
    <style>
      /* * { box-sizing: border-box }
      .pull-left{ float: left }
      .pull-right{ float: right }
      .layui-btn-xstree {
        height: 35px;
        line-height: 35px;
        padding: 0px 5px;
        font-size: 12px;
      } */
      /* 以下为修改 layui treetable 样式bug部分 */
      .layui-table-view { border: none }
      .layui-table-header { background-color: #fff; border-bottom: none }
      .layui-table-box .layui-table-header table { border-top: 1px solid #e6e6e6!important; border-left: 1px solid #e6e6e6!important }
      .layui-table-box .layui-table-body table { border-left: 1px solid #e6e6e6!important }
    </style>
  </head>
  <body>
    <div>
      <form class="layui-form">
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4">
          <div class="layui-form-item">
            <label class="layui-form-label">查询字段1</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" id="" placeholder=""></input>
            </div>
          </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4">
          <div class="layui-form-item">
            <label class="layui-form-label">查询字段2</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" id="" placeholder=""></input>
            </div>
          </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4">
          <div class="layui-form-item">
            <label class="layui-form-label">查询字段3</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" id="" placeholder=""></input>
            </div>
          </div>
        </div>
        <div class="moreSearch layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4" style="display:none">
          <div class="layui-form-item">
            <label class="layui-form-label">查询字段4</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" id="" placeholder=""></input>
            </div>
          </div>
        </div>
      </form>
      <div class="layui-row layui-clear">
          <div
              id="hideBtn" 
              onclick="{$('#showBtn').show();$(this).hide();$('.moreSearch').hide(300)}"
              class="pull-right" 
              style="margin:0 10px;border:none;background-color:#fff;color:#009688;height:30px;line-height:30px;cursor:pointer;display:none">
              收起
          </div>
          <div
              id="showBtn" 
              onclick="{$('#hideBtn').show();$(this).hide();$('.moreSearch').show(300)}"
              class="pull-right" 
              style="margin:0 10px;border:none;background-color:#fff;color:#009688;height:30px;line-height:30px;cursor:pointer">
              展开
          </div>
          <button class="layui-btn layui-btn-primary layui-btn-sm pull-right" style="margin-left:10px" onclick="projectAllChildTask.childTaskReset()">
              <i class="layui-icon layui-icon-refresh" style="font-size:12px!important"></i>
              重置
          </button>
          <button class="layui-btn layui-btn-sm pull-right" onclick="projectAllChildTask.childTaskSearch()">
              <i class="layui-icon layui-icon-search" style="font-size:12px!important"></i>
              查询
          </button>
      </div>
    </div>
    <div class="layui-row layui-clear">
      <button class="layui-btn layui-btn-sm pull-left" style="margin-left:10px" onclick="">
        新增子任务
      </button>
      <button class="layui-btn layui-btn-sm pull-left" style="margin-left:10px" onclick="">
        导入子任务
      </button>
      <button onclick="moduleSteps.getCheckData()">获取选中</button>
      <button onclick="moduleSteps.setCheckData()">设置选中</button>
      <button onclick="moduleSteps.openAll()">展开</button>
      <button onclick="moduleSteps.openFirst()">展开第一层</button>
    </div>
    <div class="layui-row" style="padding:10px">
      <table class="layui-hidden" id="treeTable" lay-filter="treeTable" lay-data="data"></table>
    </div>

    <script src="../lib/js/jquery-2.2.4.min.js"></script>
    <script src="../lib/js/jquery.form.js"></script>
    <script src="../lib/layui-treegird/layui.js"></script>
    <script src="../script/consts.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <script>
      
      var editObj = null, ptable = null, treeGrid = null, tableId = 'treeTable', layer = null, currentLayer = null;
      layui.config({
          base: '../lib/layui-treegird/extend/'
      }).extend({
          treeGrid: 'treeGrid'
      })
      $(document).ready(function() {
        moduleSteps.initTreeTable()
      })
      var moduleSteps = {
        // 初始化 treetable
        initTreeTable: function() {
          layui.use(['jquery', 'treeGrid', 'layer'], function(){
            var $ = layui.jquery
            treeGrid = layui.treeGrid
            layer = layui.layer
            ptable = treeGrid.render({
              id: tableId,
              elem: '#'+tableId,
              idField: 'id',
              url: 'http://192.168.0.117:8080/qiantu-scms/manager/apqp/index/getApqpPhaseList/1/18045151',
              cellMinWidth: 100,
              treeId: 'id',  // 树形id字段名称
              treeUpId: 'parentId',  // 树形父id字段名称
              treeShowName: 'name',  //以树形式显示的字段
              iconOpen: false,  //是否显示图标【默认显示】
              isOpenDefault: false,  //节点默认是展开还是折叠【默认展开】
              isFilter:false,
              loading:true,
              method:'post',
              height:'full', // full-100 可减去高度，但会有滚动条bug  建议使用full虽然也有bug 其它属性值未知
              cols: [
                [// 插件bug  宽度和请为101%
                  { field: 'isProjectSave', type: 'checkbox', width: '4%' },
                  { field: 'name', title: '名称', width: '17%',
                    templet: function(d) {
                      var html = '<a href="javascript:;">'+ d.name +'</a>'
                      return html
                    }
                  }, 
                  { field: 'keyParts', width: '9%', title: '关键任务', 
                    templet: function(d) {
                      var html = "", keyParts = d.keyParts
                      if(keyParts == 1) {
                        html = '<i class="demo-psi-star" style="color: #ffbd4d;"></i>';
                      }
                      return html;
                    }
                  },
                  { field: 'requireds', width: '5%', title: '必填',
                    templet: function(d) {
                      var html = ""+ d.requireds==1? '是': '否'
                      return html
                    }
                  },
                  { field: 'enclosure', width: '9%', title: '附件模版',
                    templet: function(d) {
                      var enclosureUrls = d.enclosure
                      var html = "";
                      if(enclosureUrls!=null && enclosureUrls!=undefined && enclosureUrls!=""){
                        var enclosureUrl = enclosureUrls.split(",");
                        var enclosure0 = enclosureUrl[0];
                        var enclosure1 = enclosureUrl[1];
                        // if(enclosure0 != null && enclosure0 != undefined && enclosure0 != "") {
                        //   html = html + '<a class="btn btn-xs btn-icon add-tooltip" data-toggle="tooltip" data-container="body" data-placement="bottom" href="' + ctx + '/manager/apqp/index/download/' + enclosure0+"/"+enclosure1 + '" data-original-title="点击附加下载"  target="_blank">' +
                        //       '<i class="demo-psi-paperclip icon-2x"></i>' +
                        //     '</a>';
                        // }
                      }
                      return html
                    }
                  },
                  { field: 'responsible', width: '10%', title: '责任部门' },
                  { field: 'responsibleer', width: '9%', title: '责任人' },
                  { field: 'planStartTime', width: '10%', title: '计划开始时间' },
                  { field: 'planEndTime', width: '12%', title: '计划结束时间' },
                  {  width: '15%', title: '审批人',
                    templet: function(d) {
                      var a = '<a href="javascript:;" onclick="console.log()" style="color: blue"> aaaaaaaaaaaaaaaaaaa </a>'
                      return a
                    }
                  }
                ]
              ],
              page: false,
              parseData: function (res) {//数据加载后回调
                var checkedArr = [], checkedIds = ''
                res.data.map(function(item) {
                  if (item.isProjectSave == 1) {
                    checkedArr.push(item.id)
                  }
                })
                checkedIds = checkedArr.join(',')
                setTimeout(function() {
                  treeGrid.treeOpenFirst(tableId, true)
                  treeGrid.setCheckStatus(tableId, 'id', checkedIds)
                }, 10)
              },
              onClickRow: function (index, o) {
                  // console.log(index,o,"单击！");
              },
              onDblClickRow: function (index, o) {
                  // console.log(index,o,"双击");
              }
            })
            // moduleSteps.openFirst()
            // 监听 操作栏点击
            treeGrid.on('tool('+tableId+')',function (obj) {
              if(obj.event === 'addRow'){
                moduleSteps.addRow(obj);
              }
              if(obj.event === 'editRow'){
                moduleSteps.editRow(obj);
              }
              if(obj.event === 'delRow'){
                moduleSteps.delRow(obj);
              }
            });
          })
        },
        addRow: function(obj) {
          layui.use(['layer', 'form', 'laydate'], function(){
            var form = layui.form
            var layer = layui.layer
            var laydate = layui.laydate

            console.log(obj)
            currentLayer = layer.open({
              type: 1,
              title: '新增任务',
              skin: 'layui-layer-rim', //加上边框
              area: ['80%',"80%"], //宽高
              content: 
                '<div style="padding:10px;margin-top:10px">'+
                  '<form class="layui-form" id="addProjectForm">'+
                      '<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4 layui-input-hasValidate">'+
                          '<div class="layui-form-item">'+
                              '<label class="layui-form-label">任务名称</label>'+
                              '<div class="layui-input-block">'+
                                  '<input type="text" lay-verify="required" lay-verType="tips" class="layui-input" name="" id="" placeholder=""></input>'+
                              '</div>'+
                          '</div>'+
                      '</div>'+
                      '<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4 layui-input-hasValidate">'+
                          '<div class="layui-form-item">'+
                              '<label class="layui-form-label">项目类型</label>'+
                              '<div class="layui-input-block">'+
                                  '<select id="addProjectType" lay-verify="required" lay-search name="addProjectType" class="layui-input">'+
                                      '<option value="0">产品项目</option>'+
                                      '<option value="1">实施项目</option>'+
                                      '<option value="2">售后项目</option>'+
                                  '</select>'+
                              '</div>'+
                          '</div>'+
                      '</div>'+
                      '<div class="layui-row">'+
                          '<div style="margin-left:115px">'+
                              '<button onclick="moduleSteps.saveAdd" lay-submit type="submit" class="layui-btn layui-btn-normal layui-btn-sm">保存</button>'+
                              '<button onclick="layer.close('+ currentLayer +')" class="layui-btn layui-btn-primary layui-btn-sm">取消</button>'+
                          '</div>'+
                      '</div>'+
                    '</div>',
              success: function() {
                form.render()
              }
            })
          })
        },
        saveAdd: function() {
          $('#addProjectForm').ajaxForm({
            url: '',
            type: 'post',
            dataType: 'json',
            data: {
                
            },
            success: function(){
                alert(1)
            },
            error: function() {
                alert(2)
            }
          })
        },
        editRow: function(obj) {
          layui.use(['layer', 'form', 'laydate'], function(){
            var form = layui.form
            var layer = layui.layer
            var laydate = layui.laydate

            currentLayer = layer.load(0, {
                shade: [0.1,'#fff']
            })
            $.ajax({
              type: 'GET',
              url: '',
              dataType: 'json',
              async: false,
              contentType: 'application/json;charset=utf-8',
              success: function(data) {
                
              },
              error: function(err) {
                console.log(err);
              }
            }),
            layer.close(currentLayer)
            console.log(obj)
            currentLayer = layer.open({
              type: 1,
              title: '编辑任务',
              skin: 'layui-layer-rim', //加上边框
              area: ['80%',"80%"], //宽高
              content: 
                '<div style="padding:10px;margin-top:10px">'+
                  '<form class="layui-form" id="addProjectForm">'+
                      '<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4 layui-input-hasValidate">'+
                          '<div class="layui-form-item">'+
                              '<label class="layui-form-label">任务名称</label>'+
                              '<div class="layui-input-block">'+
                                  '<input type="text" lay-verify="required" lay-verType="tips" class="layui-input" name="" id="" placeholder=""></input>'+
                              '</div>'+
                          '</div>'+
                      '</div>'+
                      '<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4 layui-input-hasValidate">'+
                          '<div class="layui-form-item">'+
                              '<label class="layui-form-label">项目类型</label>'+
                              '<div class="layui-input-block">'+
                                  '<select id="addProjectType" lay-verify="required" lay-search name="addProjectType" class="layui-input">'+
                                      '<option value="0">产品项目</option>'+
                                      '<option value="1">实施项目</option>'+
                                      '<option value="2">售后项目</option>'+
                                  '</select>'+
                              '</div>'+
                          '</div>'+
                      '</div>'+
                      '<div class="layui-row">'+
                      '<div style="margin-left:115px">'+
                          '<button onclick="moduleSteps.saveEdit" lay-submit type="submit" class="layui-btn layui-btn-normal layui-btn-sm">保存</button>'+
                          '<button onclick="layer.close('+ currentLayer +')" class="layui-btn layui-btn-primary layui-btn-sm">取消</button>'+
                      '</div>'+
                  '</div>'+
                '</div>',
              success: function() {
                form.render()
              }
            })
          })
        },
        saveEdit: function() {
          $('#addProjectForm').ajaxForm({
            url: '',
            type: 'post',
            dataType: 'json',
            data: {
                
            },
            success: function(){
                alert(1)
            },
            error: function() {
                alert(2)
            }
          })
        },
        delRow: function(obj) {
          console.log(obj)
          layui.use(['layer'], function(){
            var layer = layui.layer

            layer.confirm('确认删除该任务吗？', {
              btn: ['确认','取消'], //按钮
              title: '删除任务'
            }, function(){
                $.ajax({
                    type: 'GET',
                    url: '',
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    success: function(data) {
                        layer.msg('删除成功！', {icon: 1})
                        
                    },
                    error: function(err) {
                        console.log(err);
                    }
                })
            },function() {
            })
          })
        },
        getCheckData: function() {
            var checkStatus = treeGrid.checkStatus(tableId), data = checkStatus.data;
            console.log(data, 11111);
            var idArr = [], ids = ''
            data.forEach(function(item) {
              idArr.push(item.id)
            })
            ids = idArr.join('|')
            return ids
        },
        setCheckData: function() {
          treeGrid.setCheckStatus(tableId, 'id', '18037568')
        },
        openAll: function() {
          var treedata=treeGrid.getDataTreeList(tableId);
          console.log(treedata[0][treeGrid.config.cols.isOpen]);
          treeGrid.treeOpenAll(tableId,!treedata[0][treeGrid.config.cols.isOpen]);
        },
        openFirst: function() {
          treeGrid.treeOpenFirst(tableId, true)
        }
      }
      
    </script>
  </body>
</html>
